@charset "UTF-8";
/**
 * 
 * @authors wu
 * @date    2017-06-04 10:39:39
 * @version 1.0.0
 */

/*-------------------------    start  ------------------------- */
html,body{ font-size: 125%; background-color: #f4f4f4;}
body{ font-family: "Microsoft Yahei", Arial, Verdana; padding: 0;}

ul{ margin: 0; padding: 0; list-style-type: none;}
li{list-style-type:none;}
.fl{ float: left;}
.fr{ float: right;}
.clearfix:after{ content: ""; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; font-size: 0;}
.clearfix{ *zoom: 1;}
.ell{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.breakAll{ word-break: break-all;}
.overflow{ overflow: hidden;}
.borderRadius{ border-radius: 50%;}
input,a{ outline: none; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0,0,0,0); text-decoration:none;}
[v-cloak]{ display: none;}

/*-------------------------    end  ------------------------- */

/* 定位 */
.pa{ position: absolute;}
.pr{ position: relative;}
.pf{ position: fixed;}
/* block */
.db{ display: block;}
.dib{ display: inline-block;}
.dn{ display: none;}
/* text */
.textC{ text-align: center;}
.textL{ text-align: left;}
.textR{ text-align: right;}
/*background-color*/
.bgff{ background-color: #fff;}
.bgf0{ background-color: #f0f0f0;}
.bgf4{ background-color: #f4f4f4;}
/* border */
.border{ border: 2px solid #4c4739;}
.borderN{ border: none;}
.borderT{ border-top: 2px solid #4c4739;}
.borderB{ border-bottom: 2px solid #4c4739;}
/* 灰色背景层 */
.borderspace{ border-bottom: 0.25rem solid #f4f4f4;}
.borderTS{ border-top: 0.25rem solid #f4f4f4;}
/* border-radius */
.bRadius{ border-radius: 5px;}
/*font-size*/
.font18{ font-size: 0.5rem;}
.font20{ font-size: 0.55rem;}
.font22{ font-size: 0.6rem;}
.font24{ font-size: 0.65rem;}
.font26{ font-size: 0.7rem;}
.font28{ font-size: 0.8rem;}
.font30{ font-size: 0.83rem;}
.font32{ font-size: 0.85rem;}
.font34{ font-size: 0.94rem;}
.font36{ font-size: 0.96rem;}
.font48{ font-size: 1.2rem;}
/* .font18{ font-size: 0.39rem;}
.font20{ font-size: 0.43rem;}
.font22{ font-size: 0.47rem;}
.font24{ font-size: 0.51rem;}
.font30{ font-size: 0.64rem;}
.font36{ font-size: 0.77rem;} */
.normal{ font-weight: normal;}
/*line-height*/
.line15{ line-height: 1.5;}
/*padding*/
.pad24{ padding: 2.4%;}
.pad40{ padding: 5.3%;}
.padT40{ padding-top: 5.3%;}
.padR40{ padding-right: 5.3%;}
.padTB40{ padding-top: 5.3%; padding-bottom: 5.3%;}
.padLR40{ padding-left: 5.3%; padding-right: 5.3%;}
.padTB24{ padding-top: 2.4%; padding-bottom: 2.4%;}
.padLR24{ padding-left: 2.4%; padding-right: 2.4%;}
.padT24{ padding-top: 2.4%;}
.padB24{ padding-bottom: 2.4%;}
.pad375{ padding: 3.75%;}

.padT23{ padding-top: 2.3rem;}
.padB23{ padding-bottom: 2.8rem;}  /*因底部调整改为2.8rem*/
/*margin*/
.mar24{ margin: 2.4%;}
.marTB24{ margin-top:2.4%; margin-bottom: 2.4%;}
.marT24{ margin-top: 2.4%;}
.marB24{ margin-bottom: 2.4%;}
.marL24{ margin-left: 2.4%;}
.marR24{ margin-right: 2.4%;}
.marT40{ margin-top: 5.3%;}

.mar12{ margin: 1.2%;}
.marT12{ margin-top: 1.2%;}
.marB12{ margin-bottom: 1.2%;}
/*width*/
.w33 { width: 33%;}
.w100{ width: 100%;}

.wh45{ width: 0.95rem; height: 0.95rem;}
/*line-height*/
.line95{ line-height: 0.95rem;}
/*color*/
.color33{ color:#333;}
.colora3{ color: #a3a3a3;}
.color1c{ color: #1c1c20;}
.colord2{ color: #d2c195;}
.color66{ color: #666;}
.color9a{ color: #9a9a9a;}
.colorff{ color: #fff;}
/*background-color*/
.bgf4{ background-color: #f4f4f4;}



/*头部*/
.header{ position: fixed; top: 0; left: 0; z-index: 20; width: 100%; height: 2.3rem; line-height: 2.3rem; color: #fff; background-color: #000;
	h1{ margin: auto; width: 50%; text-align: center; font-size: 0.94rem; font-weight: normal;}
	.icon{ position: absolute; top: 50%; z-index: 21; display: block; margin-top: -1.01rem; padding: 0.5rem; width: 1.02rem; height: 1.02rem; background: url(../../images/header.png); background-clip: content-box; background-size: auto 3.05rem;}
	.userIcon{ left: 0; background-position: 0.5rem 0.5rem;}
	.back{ left: 0; background-position: -0.5rem 0.5rem;}
	.cateIcon{ right: 0; background-position: -0.5rem -0.5rem;
		&.on{ background-position: 0.5rem -0.5rem;}
	}
	.addIcon{ right: 0; background-position: -1.54rem 0.5rem;}
	.shareIcon{ right: 12%; background-position: -1.54rem -0.52rem;}
	.flIcon{ right: 0; background-position: -2.51rem -1.54rem;}

	.text{ position: absolute; top: 0; right: 2.4%; z-index: 21; font-size: 0.85rem; color: #fff;}
	.down{ position: absolute; top: 42%; content: ''; display: inline-block; margin-left: 2%; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #fff;}
	.cart{ right: 0; background-position: -3.54rem -1.54rem;}
}
.search-box{ margin: 0.4rem auto; width: 70%; height: 1.5rem; line-height: 1.5rem; font-size: 0.6rem; color: #fff; background-color: #35baf6; border-radius: 5px;
	.search-btn{ display: block; margin: 0.24rem; width: 1.02rem; height: 1.02rem; background: url(../images/search.png); background-size: cover; outline: none; border: none;}
	.search-txt{ float: left; margin: 0.25rem 0; padding: 0.1rem 0.2rem; width: 70%; color: #fff; background-color: #35baf6; border: none; outline: none;
		&::-webkit-input-placeholder{ color: #fff;}
	}
	&.searchWhite{  margin: 0.4rem 0 0.4rem 0.4rem; width: 80%; background-color: #fff;
		.search-btn{ background: url(../../images/search2.png); background-size: cover;}
		.search-txt{ color: #b6b6b6; background-color: #fff; /* border-left: 1px solid #03a9f4; */ border-radius: 0;
			&::-webkit-input-placeholder{ color: #b6b6b6;}
		}
	}
}
/*底部*/
.footer{ position: fixed; bottom: 0; left: 0; z-index: 19; padding: 0.2rem 0; width: 100%; text-align: center; background-color: #1a1a1a; border-top: 1px solid #4c4739;
	.footerIcon{ float: left; display: block; width: 25%; font-size: 0.5rem; color: #d2c195;
		&.on{ color: #eb610f;}
		&:before{ content: ''; display: block; margin: auto; /* margin-bottom: 0.5rem; */ width: 1.6rem; height: 1.6rem; background: url(../images/index.png) no-repeat; background-size: 9.6rem auto;}
	}
	.fhome{
		&:before{ background-position: 0 -1.6rem;}
		&.on:before{ background-position: 0 -3.2rem;}
	}
	.fauth{
		&:before{ background-position: -1.6rem -1.6rem;}
		&.on:before{ background-position: -1.6rem -3.2rem;;}
	}
	.factive{
		&:before{ background-position: -3.2rem -1.6rem;}
		&.on:before{ background-position: -3.2rem -3.2rem;}
	}
	.fuser{
		&:before{ background-position: -4.8rem -1.6rem;}
		&.on:before{ background-position: -4.8rem -3.2rem;}
	}
}

/*背景层*/
.popbg{ position: fixed; top: 0; left: 0; z-index: 20; width: 100%; height: 100%; background-color: #000; opacity: 0.7; -webkit-opacity: 0.7; -moz-opacity: 0.7; filter:alpha(opacity=70);}
/*alert*/
.popBox{ position: fixed; top: 30%; left: 0; z-index: 23; margin-left: 18%; width: 64%; font-size: 0.65rem; text-align: center; color: #000; background-color: transparent; border-radius: 5px;
	
}


/* 320px */
@media screen and (min-width: 320px) {
	html{ font-size: 20px;}
}

/* 480px */
@media screen and (min-width: 480px) {
	html{ font-size: 30px;}
}

/* 750px */
@media screen and (min-width: 750px) {
	html{ font-size: 48px;}
}